<template>
  <MainLayout>
    <router-view></router-view>
    <el-card>
    <h3>财务管理</h3>
    
    <!-- 财务统计 -->
    <el-row :gutter="20" class="financial-stats">
      <el-col :span="8">
        <el-card>
          <div class="stat-item">
            <span class="label">总收入</span>
            <span class="value">¥ {{ totalIncome }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-item">
            <span class="label">总支出</span>
            <span class="value">¥ {{ totalExpense }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-item">
            <span class="label">净利润</span>
            <span class="value">¥ {{ netProfit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 财务记录表格 -->
    <el-table
      :data="financialRecords"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="date" label="日期" width="150" />
      <el-table-column prop="type" label="类型" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.type === 'income' ? 'success' : 'danger'">
            {{ scope.row.type === 'income' ? '收入' : '支出' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="120" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button size="small" @click="editRecord(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteRecord(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="totalRecords"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 添加/编辑财务记录对话框 -->
    <el-dialog
      :title="isEditing ? '编辑财务记录' : '添加财务记录'"
      v-model="dialogVisible"
      width="30%"
    >
      <el-form :model="currentRecord">
        <el-form-item label="类型">
          <el-select v-model="currentRecord.type" placeholder="请选择类型">
            <el-option label="收入" value="income" />
            <el-option label="支出" value="expense" />
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number v-model="currentRecord.amount" :precision="2" :min="0" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="currentRecord.date"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="currentRecord.description"
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRecord">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
  </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },
  data() {
    return {
      financialRecords: [
        {
          id: 1,
          type: 'income',
          amount: 10000,
          date: '2023-10-01',
          description: '产品销售收入'
        },
        {
          id: 2,
          type: 'expense',
          amount: 5000,
          date: '2023-10-02',
          description: '运营成本'
        }
      ],
      currentRecord: {
        id: null,
        type: '',
        amount: 0,
        date: '',
        description: ''
      },
      dialogVisible: false,
      isEditing: false,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalRecords: 0
    };
  },
  computed: {
    totalIncome() {
      return this.financialRecords
        .filter(record => record.type === 'income')
        .reduce((sum, record) => sum + record.amount, 0);
    },
    totalExpense() {
      return this.financialRecords
        .filter(record => record.type === 'expense')
        .reduce((sum, record) => sum + record.amount, 0);
    },
    netProfit() {
      return this.totalIncome - this.totalExpense;
    }
  },
  methods: {
    addRecord() {
      this.currentRecord = {
        id: null,
        type: '',
        amount: 0,
        date: '',
        description: ''
      };
      this.isEditing = false;
      this.dialogVisible = true;
    },
    editRecord(record) {
      this.currentRecord = { ...record };
      this.isEditing = true;
      this.dialogVisible = true;
    },
    saveRecord() {
      if (this.isEditing) {
        const index = this.financialRecords.findIndex(r => r.id === this.currentRecord.id);
        if (index !== -1) {
          this.financialRecords.splice(index, 1, this.currentRecord);
        }
      } else {
        this.currentRecord.id = this.financialRecords.length + 1;
        this.financialRecords.push(this.currentRecord);
      }
      this.dialogVisible = false;
    },
    deleteRecord(id) {
      this.financialRecords = this.financialRecords.filter(record => record.id !== id);
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  },
  mounted() {
    this.totalRecords = this.financialRecords.length;
  }
};
</script>

<style scoped>
.financial-stats {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-item .label {
  display: block;
  font-size: 14px;
  color: #666;
}

.stat-item .value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>